---
title: Példák
description: Ultracite működésének előtte és utána példái.
---

To illustrate Ultracite’s capabilities, here are a few practical examples of issues it catches and fixes. Each example shows code before (with a problem) and after Ultracite is applied. These examples demonstrate how Ultracite improves code automatically.

## Automatikus kódformázás

### Előtte (rendetlen formázás)

```tsx title="page.tsx"
function greet(name) { return 'Hello, '+ name + "!!" }
```

In this code, spacing and concatenation style are off. It’s also using string concatenation instead of template literals, and has double quotes mixed with single quotes.

### Utána (formázott)

```tsx title="page.tsx"
function greet(name) {
  return `Hello, ${name}!!`;
}
```

Ultracite's formatter has:

- A függvényt megfelelő sortörésekkel formázta az olvashatóság érdekében.
- A string konkatenációt template literálra cserélte (ez automatikus javítás lehet egy lint szabályból, amely a template stringeket javasolja az olvashatóság növelésére).
- Az idézőjeleket a template esetén backtickekre szabványosította (más esetekben következetesen dupla idézőjeleket használna).
- Újrapozicionálta a pontosvesszőt a `return` utasítás végére.
- Biztosította a megfelelő szóközöket a kapcsos zárójelek és a zárójelek körül.

A fejlesztő nem formázta át kézzel a kódot — csak elmentette a fájlt, és Ultracite elvégezte a többit. Az eredmény tisztább, következetesebb kód.

Ultracite azt is figyelmezteti, hogy a `name` nincs típussal ellátva, és javasolni fogja egy típus hozzárendelését.

## Szigorú egyenlőség érvényesítése

### Előtte (lehetséges hiba laza egyenlőség használatával)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}
```

Here, the code is using loose equality (`==`) to compare `response.status` to `200`. Using loose equality can be error-prone due to type coercion (e.g., `response.status` could be a string `“200”` and still pass). Ultracite’s strict rules likely enforce using `===` for comparisons.

### Utána (Ultracite automatikus javítása alkalmazva)

```tsx title="validate.ts"
let isValid = false;
const response = getResponse();
if (response.status === 200) { // [!code highlight]
  isValid = true;
}
```

Ultracite automatically replaced `== 200` with `=== 200`. This small change prevents subtle bugs. The fix was applied on save as part of the `source.fixAll.biome` actions. Such a rule (similar to ESLint’s `eqeqeq`) ensures developers use strict equality checking.

Additionally, Ultracite will also warn that `isValid` is never used, and will suggest removing it.

## Importok rendezése és tisztítása

### Előtte (rendezetlen importok)

```tsx title="index.tsx"
import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

The imports here are out of alphabetical order, and the helper import is never used in the file.

### Utána (mentés után Ultracite-tel)

```tsx title="index.tsx"
import React from 'react'; // [!code highlight]
import A from './a-module'; // [!code highlight]
import Z from './z-module'; // [!code highlight]
import { helper } from './util'; // [!code --]

const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);
```

Ultracite (via Biome’s organize imports feature) sorted the imports alphabetically by module name. It also removed the unused helper import automatically. The before/after difference happens immediately on save, ensuring that your imports section is always tidy:

- Nincsenek fel nem használt importok a fájl tetején.
- Meghatározott import-sorrend (így a merge-ek és diff-ek nem zavarodnak össze különböző import-sorrendek miatt).

Ez fenntarthatóbb kódhoz vezet, különösen azokban a fájlokban, amelyek sok importot tartalmaznak.

## Hozzáférhetőségi javítás

### Előtte

```tsx title="Button.tsx"
<button onClick={submitForm}>
  Open modal
</button>
```

The default type of a button is `submit`, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application. Ultracite will warn you about this and offer a quick fix to change the type to `button`.

### Utána (kézi vagy gyors javítás)

```tsx title="Button.tsx"
<button onClick={submitForm} type="button">
  Open modal
</button>
```

A típus most `button`, ami megakadályozza, hogy egy esetleges szülő űrlap elküldésre kerüljön, amikor a gombra kattintanak.

---

These examples demonstrate how Ultracite improves code quality:

- Formázás és stíluskövetkezetesség erőfeszítés nélkül.
- Automatikus javítások sok gyakori problémára (így ritkán kell kézzel javítanod triviális dolgokat).
- Valódi problémák azonosítása (így korán javíthatod őket a fejlesztés során).

By using Ultracite, your code not only stays clean but also less buggy and more accessible, thanks to the collective knowledge encoded in its rules.